<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-guide"></i> 公告</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-tabs v-model="message">
                <el-tab-pane :label="`公告(${bullentins.length}})`" name="first">
                    <el-table :data="bullentins" :show-header="false" style="width: 100%">
                        <el-table-column>
                            <template slot-scope="scope">
                                <div class="message-title">{{scope.row.noticeContent}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="noticeTime" width="180"></el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import {userBullentins} from '@/api'

    export default {
        name: 'tabs',
        data() {
            return {
                message: 'first',
                bullentins: []
            }
        },
        methods: {
            handleRead(index) {
                const item = this.unread.splice(index, 1);
                console.log(item);
                this.read = item.concat(this.read);
            },
            handleDel(index) {
                const item = this.read.splice(index, 1);
                this.recycle = item.concat(this.recycle);
            },
            handleRestore(index) {
                const item = this.recycle.splice(index, 1);
                this.read = item.concat(this.read);
            },
            userBullentins(){
                userBullentins().then(res => {
                    this.bullentins = res.data
                })
            }
        },
        mounted(){
            this.userBullentins()
        }
    }

</script>

<style>
.message-title{
    cursor: pointer;
}
.handle-row{
    margin-top: 30px;
}
</style>

